function tickets(){}

tickets.prototype = {
    
    statusAvailable : 1,
    statusBooked : 2,
    statusUnavailable : 3,
    statusError : 4,
    inRequest : false,
    
    bookTicket : function(ticketId){
        this.sendRequest('/buy/book-ticket', ticketId);
    },
    
    unbookTicket : function(ticketId){
        this.sendRequest('/buy/unbook-ticket', ticketId);
    },

    addSeatToBoard: function(ticketId){
        
        const row = $('#'+ticketId).data('fileira');
        const seat = $('#'+ticketId).data('cadeira');

        const stage = $('.cadeiras_cart--content');

        const seatStage     = document.createElement('div');
        const seatNumber    = document.createElement('h3');

        $(seatNumber).text(`${row}-${seat}`);

        $(seatStage).append(seatNumber);

        $(seatStage).addClass('cadeira cadeira-'+ticketId);
        $(stage).append(seatStage);
    },

    removeSeatToBoard: function(ticketId){
        $('.cadeira-'+ticketId).remove();
    },

    updateSeatCount: function(seats){
        const counter = $('.cadeiras_cart--header span');
        $(counter).text(seats);
    },
    
    multiSectorSelectTicket : function(eventId){
        var thisObject = this;
        var sectors = {
            event:eventId,
            data: []
        };
        var sectorsSelected = false;
        let sectorId = 0;
        let qnt = 0;

        $(".multiSectorSelectTicket").each(function() {
            quantity = $(this).val();

            if(quantity > 0){
                qnt = $(this).val();
                sectorId = $(this).attr("id");
                sectors.data.push({sector: sectorId, qnt: qnt});
                sectorsSelected = true;
            }
        });
        
        if(sectorsSelected) {
            ajaxLoader.ajaxStart();
            $.ajax({
                url: '/buy/book-multiple-tickets-sectors',
                data: {sectors: sectors},
                method: 'post',
                dataType: 'json',
                success: function(json) {
                    gtmActions.addToCart(sectorId, qnt);
                    thisObject.validateMultiBookingResponse(json);
                },
            });
        }else{
            var modal = new Modal({
                title: translate["tickets-js-modal-title-alert"],
                body : '<div class="alert alert-danger" role="alert">' + translate["tickets-js-error-no-ticket-selected"] + '</div>',
                buttonOK : false,
                cancel : function(){
                    modal.hide();
                }
            });

            modal.show();
        }
    },
    
    sendRequest : function(url, ticketId){
        $('#'+ticketId).css('visibility','hidden');
        $('#'+ticketId).after('<div class="spin"></div>');
        
        this.sendAjax(url, ticketId);
    },
    
    sendAjax : function(url, ticketId){
        var thisObject = this;
        
        if(this.inRequest){
            var sendRequestFunction = thisObject.sendAjax.bind(this);
            setTimeout( function(){
                sendRequestFunction(url, ticketId)
            }, 100 );
            return false;
        }
        
        this.inRequest = true;
        $.ajax({
            url: url,
            data: {ticket: ticketId},
            method: 'post',
            dataType: 'json',
            success: function(json) {
                thisObject.inRequest = false;
                thisObject.validateBookingResponse(json, ticketId);
            },
        });
    },
    
    validateBookingResponse : function(json, ticketId){
        $('#'+ticketId).css('visibility','visible');
        $('#'+ticketId).next('.spin').remove();
        let seatCounter;

        switch (json.status) {
            case 0:
                window.location.reload();
                break;
                
            case this.statusAvailable:
                $('#'+ticketId).attr("class", "seat disponivel");
                $('#'+ticketId).attr("onClick", "tickets.bookTicket("+ticketId+")");
                seatCounter = $('.seat.reserva').length;
                this.updateSeatCount(seatCounter);
                this.removeSeatToBoard(ticketId);
                break;
                
            case this.statusBooked:
                $('#'+ticketId).attr("class", "seat reserva");
                seatCounter = $('.seat.reserva').length;
                this.updateSeatCount(seatCounter);
                $('#'+ticketId).attr("onClick", "tickets.unbookTicket("+ticketId+")");
                this.addSeatToBoard(ticketId);
                break;
                
            case this.statusUnavailable:
                $('#'+ticketId).attr("class", "seat reservada");
                $('#'+ticketId).removeAttr("onClick");
                
                var modal = new Modal({
                    title: translate["tickets-js-modal-title-alert"],
                    body : '<div class="alert alert-danger" role="alert">'+json.message+'</div>',
                    buttonOK : false,
                });
                
                modal.show();
                
                break;
                
            case this.statusError:
                if(typeof json.url == 'undefined'){
                    var modal = new Modal({
                        title: translate["tickets-js-modal-title-alert"],
                        body : '<div class="alert alert-danger" role="alert">'+json.message+'</div>',
                        buttonOK : false,
                    });
                }else{
                    console.log(json.url);
                    if(localStorage.getItem('isSeat') === 'true'){
                        var modal = new Modal({
                            title: translate["tickets-js-modal-title-alert"],
                            body : '<div class="alert alert-danger" role="alert">'+json.message+'</div>',
                            buttonOK : false
                        });
                    }else{
                        var modal = new Modal({
                            title: translate["tickets-js-modal-title-alert"],
                            body : '<div class="alert alert-danger" role="alert">'+json.message+'</div>',
                            buttonOK : false,
                            cancel : function(){
                                window.location = json.url;
                            }
                        });
                    }
                }
                
                modal.show();
                break;
            default:
                var modal = new Modal({
                    title: translate["tickets-js-modal-title-alert"],
                    body : '<div class="alert alert-danger" role="alert">' + translate["tickets-js-generic-error"] + '</div>',
                    buttonOK : false,
                    cancel : function(){
                        window.location.reload();
                    }
                });
            
                modal.show();
                break;
        }
        
        if(json.cart_total != undefined){
            $('#cart_total').text(json.cart_total);
        }
    },
    
    validateMultiBookingResponse : function(json){

        if(json.cart_total != undefined){
            $('#cart_total').text(json.cart_total);
        }
        
        switch (json.status) {

            case this.statusBooked:

                window.location.href = '/shopping-cart';

                break;
                
            case this.statusError:
                ajaxLoader.ajaxStop();
                if(typeof json.url == 'undefined'){
                    var modal = new Modal({
                        title: translate["tickets-js-modal-title-alert"],
                        body : '<div class="alert alert-danger" role="alert">'+json.message+'</div>',
                        buttonOK : false,
                    });
                }else{
                    var modal = new Modal({
                        title: translate["tickets-js-modal-title-alert"],
                        body : '<div class="alert alert-danger" role="alert">'+json.message+'</div>',
                        buttonOK : false,
                        cancel : function(){
                            window.location = json.url;
                        }
                    });
                }
                
                modal.show();
                break;
            default:
                ajaxLoader.ajaxStop();
                var modal = new Modal({
                    title: translate["tickets-js-modal-title-alert"],
                    body : '<div class="alert alert-danger" role="alert">' + translate["tickets-js-generic-error"] + '</div>',
                    buttonOK : false,
                    cancel : function(){
                        window.location.reload();
                    }
                });
            
                modal.show();
                break;
        }
        
    },
    
    saleSectorExpress : function(sectorId, ticketRows, targetData) {

        const skinName = document.getElementById('skin_name');
        const skinValue = skinName ? skinName.value : null;

        $(".match_sectorView").show();
        $(".match_sectors").hide();

        $("#view_back").show();
        $("#history_back").hide();

        const sectorOverMessage = $("#sector-over-message");

        if(sectorOverMessage){
            sectorOverMessage.hide();
        }

    	var comboRowsTickets = '<div class="match_sectorView--body"><div class="form-group d-flex align-items-center pt-4 justify-content-between">';
		comboRowsTickets += '<label for="qtde_inteira" style="font-weight: bold;">Quantidade</label>';
		comboRowsTickets += '<div style="max-width: 140px; background: #fff; padding: 10px; border-radius: 10px;" class="d-flex justify-content-center align-items-center match_sector--desktopAddon"><input id="ticket_quantity" class="multiSectorSelectTicket" type="text" value="1" name="ticketquantity">';
		
		comboRowsTickets += '</div></div></div>';
		comboRowsTickets += '<p class="m-0 p-0 pt-3">Obs.: ' + translate["tickets-js-tip-message"] + '<input id="sectorId" type="hidden" value="'+sectorId+'"></p>';

        let comboRowsTicketsBtn = '<div class="d-flex justify-content-center pt-3"><button class="btn fc-btn fc-btn-outfocus" onClick="tickets.listSectors()">Voltar</button> &nbsp; <button class="btn fc-btn" onClick="tickets.validateBooking('+sectorId+')">Comprar</button></div>';
        
        $(".match_sectorView--btn").html(comboRowsTicketsBtn);
        $(".match_sectorView--content").html(comboRowsTickets);
		
        // Zera
		$(".match_sectorView .sector-name").text('');

		$("#match_page--title").text('Local selecionado:');
        $('#match_page--description').text('Selecione a quantidade de ingressos que deseja comprar');


        const sectorName = $('.match_sector[data-sector="'+sectorId+'"]').find('.match_sector-name').text();
        const sectorValue = $('#price-'+sectorId).html();

        $(".match_sectorView .sector-name").html('<strong>'+sectorName+'</strong>');

        if(skinValue && skinValue === 'flamengo-nexo') {
            $(".match_sectorView--contentHeader").html('<strong>' +sectorName + '</strong><br><small>A partir de ' + sectorValue + '<span id="nacao-message" style="font-size: 9px; display: block; line-height: 9px;">Sócio Nação - Desconto no Carrinho</span></small>');
        }else{
            $(".match_sectorView--contentHeader").html('<strong>' +sectorName + '</strong><br><small>A partir de ' + sectorValue + '</small>');
        }
        
        $("#ticket_quantity").TouchSpin({
            min: 0,
            max: ticketRows
        });

        const element = document.querySelector(".match_page-map");
        if (element) {
        const offset = 80;
        const y = element.getBoundingClientRect().top + window.pageYOffset - offset;

        window.scrollTo({
            top: y,
            behavior: "smooth"
        });
        }

		// Veio de evento do mapa
    	if( targetData ) {

			if( targetData.image ) {
				$(".match_sectorView .sector-preview").attr('href', targetData.image);
				// Muda imagens de zoom
				$(".match_sectorView #imageZoom").attr('src', targetData.image);
				$(".match_sectorView .containerZoom").css('background-image', 'url('+ targetData.image +')' );
			}
		}
    },
    
    validateBooking: function(sectorId) {
        var thisObject = this;
        var ticketQuantity = $('#ticket_quantity').val();

        gtmActions.addToCart(sectorId, ticketQuantity);

        var data = { sectorId: sectorId, ticketQuantity: ticketQuantity };
        // normal ajax request to /buy/book-multiple-tickets    
        $.ajax({
            url: '/buy/book-multiple-tickets/',
            data: data,
            method: 'post',
            dataType: 'json',
            success: function(json) {
                thisObject.validateMultiBookingResponse(json);
            }
        });
    },

    listSectors : function(){
        $(".match_sectorView").hide();
        $(".match_sectors").show();
        $("#view_back").hide();
        $("#history_back").show();
        
        const sectorOverMessage = $("#sector-over-message");
        
		$("#match_page--title").text('Selecione o setor:');
        $('#match_page--description').text('Clique no mapa ou na lista para escolher o local');

        if(sectorOverMessage){
            sectorOverMessage.show();
        }
    },
    
    showMessage: function(message, url){

        if(typeof url == 'undefined' || url == false){
            var modal = new Modal({
                title: translate["tickets-js-modal-title-alert"],
                body : '<div class="alert alert-danger" role="alert">'+message+'</div>',
                buttonOK : false,
            });
        }else{
            var modal = new Modal({
                title: translate["tickets-js-modal-title-alert"],
                body : '<div class="alert alert-danger" role="alert">'+message+'</div>',
                buttonOK : false,
                cancel : function(){
                    window.location = url;
                }
            });
        }
        
        modal.show();
    },

    totalAcesso : function(eventId){
        var thisObject = this;
        var sectors = {
            event:eventId,
            data: []
        };
        var sectorsSelected = false;
        
        $(".multiSectorSelectTicket").each(function() {
            var qnt = $(this).val();
            var sectorId = $(this).attr("id");

            if(qnt > 0){
                sectors.data.push({sector: sectorId, qnt: qnt});
                sectorsSelected = true;
            }
        });
        
        if(sectorsSelected) {
            ajaxLoader.ajaxStart();
            $.ajax({
                url: '/buy/book-total-acesso',
                data: {sectors: sectors},
                method: 'post',
                dataType: 'json',
                success: function(json) {
                    thisObject.validateMultiBookingResponse(json);
                },
            });
        }else{
            var modal = new Modal({
                title: translate["tickets-js-modal-title-alert"],
                body : '<div class="alert alert-danger" role="alert">' + translate["tickets-js-error-no-ticket-selected"] + '</div>',
                buttonOK : false,
                cancel : function(){
                    modal.hide();
                }
            });

            modal.show();
        }
    },

    getRecaptchaToken: function() {
        return $('#recaptcha_token').val();
    }

    // Teste
    // recaptchaHelper.attachTokenToData('book_ticket', {sectorId: sectorId, ticketQuantity: ticketQuantity}, function(data, error) {
    //     if (!error) {
    //         $.ajax({
    //             url: '/buy/book-multiple-tickets',
    //             data: data,
    //             method: 'post',
    //             dataType: 'json',
    //             success: function(json) {
    //                 // handle response
    //             }
    //         });
    //     } else {
    //         // handle recaptcha error
    //     }
    // });
}

var tickets = new tickets();